/**
 * Created by Ysssssss on 2021/4/15.
 */

import React, { PureComponent } from 'react'
import {Button} from "antd";
import CustomizeTableProvide, {CustomizeTable} from "@common/presentational/CustomizeTable";
import {withRouter} from "react-router-dom";
import {connect} from "react-redux";
import {getProductPropertyList, deleteProductProperty} from "@sagas/productCenter";
import DoubleCheck from "@common/presentational/DoubleCheck";
import { CustomizeDndProvider, DraggableTableRow } from "@common/presentational/DndSort";
import {moveToNewIndex} from "@utils/arrayHelper";
import ProductPropertyEditModal from "@components/productCenter/modal/ProductPropertyEditModal";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import BilinIcon from "@common/presentational/BilinIcon";


@withRouter
@connect(({ productCenter }) => ({
    productPropertyList: productCenter.productPropertyList || []
}), {
    getProductPropertyList,
    deleteProductProperty
})
class ProductPropertyListPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            sortable: false,
            sortList: []
        }

        this.productPropertyEditModal = React.createRef()

        this.getTableInfo = this.getTableInfo.bind(this)
        this.moveRow = this.moveRow.bind(this)
        this.showEditModal = this.showEditModal.bind(this)

        this.columns = [{
            title: '属性组',
            dataIndex: 'name',
            key: 'name',
            width: '150px'
        }, {
            title: '属性项',
            dataIndex: 'items',
            key: 'items',
            render: text => (
                <div className='overflow-cell-three-line'>
                    { text.join(', ') }
                </div>
            )
        }, {
            title: '操作',
            key: 'operation',
            width: '200px',
            render: (text, record) => this.state.sortable ? (
                <div className="flex-vertical-center cur-move drag-handle" ref={record.dragRef}>
                    <BilinIcon type="drag" className="mgr-8"/>
                    <span>排序</span>
                </div>
            ) : (
                <div className="flex-vertical-center">
                    <div className="mgr-8 ft-hover" onClick={this.showEditModal.bind(this, record)}>编辑</div>
                    <DoubleCheck onClick={this.deletePropertyGroup.bind(this, record.name)}>
                        <div className="mgr-8 ft-hover">删除</div>
                    </DoubleCheck>
                </div>
            ),
        }]
    }

    getTableInfo () {
        const { productNature } = getHistoryMatchParams(this.props)
        this.props.getProductPropertyList({ productNature })
    }

    toggleSortList (bool) {
        this.setState({
            sortable: bool,
            sortList: bool ? this.props.productPropertyList.map((item, index) => ({
                ...item,
                key: `sort-${index}`,
                name: index,
                dragRef: React.createRef()
            })) : []
        })
    }

    moveRow (dragId, hoverId) {
        const { sortList } = this.state
        let dragIndex = 0
        let hoverIndex = 0
        sortList.forEach((item, index) => {
            if(item.name === dragId) {
                dragIndex = index
            }
            if(item.name === hoverId) {
                hoverIndex = index
            }
        })
        this.setState({
            sortList: moveToNewIndex(sortList, dragIndex, hoverIndex)
        })
    }

    showEditModal (record = {}) {
        this.productPropertyEditModal.current?.show({...record})
    }

    deletePropertyGroup (name) {
        this.props.deleteProductProperty({name}, () => {
            this.getTableInfo()
        })
    }

    render () {
        const { productPropertyList } = this.props
        const { sortable, sortList } = this.state
        const { productNature } = getHistoryMatchParams(this.props)
        return (
            <div className="table-scroll-container">
                {sortable ? (
                    <div className="table-params page-params flex-row-between mgb-16">
                        <span className="ft-clr-ml ft-16">请拖动规格组进行排序</span>
                        <div>
                            <Button type="primary" className="button-small mgr-16">保存排序</Button>
                            <Button className="button-small" onClick={this.toggleSortList.bind(this, false)}>取消排序</Button>
                        </div>
                    </div>
                ) : (
                    <div className="table-params page-params flex-row-between mgb-16">
                        <Button type="primary" className="button-small" ghost onClick={this.showEditModal.bind(this, {})}>新建</Button>
                        {/*<Button className="button-small" onClick={this.toggleSortList.bind(this, true)}>排序</Button>*/}
                    </div>
                )}
                <CustomizeDndProvider>
                    <CustomizeTableProvide tableKey="productTypeList" onChange={this.getTableInfo}>
                        <div className="table-list without-pagination">
                            <CustomizeTable
                                columns={this.columns}
                                dataSource={sortable ? sortList : productPropertyList}
                                components={{
                                    body: {
                                        row: DraggableTableRow,
                                    }
                                }}
                                onRow={(record, index) => ({
                                    id: sortable ? record.name : index,
                                    moveItemFunc: this.moveRow,
                                    type: sortable ? 'propertyList' : '',
                                    dragRef: record.dragRef
                                })}
                            />
                        </div>
                    </CustomizeTableProvide>
                </CustomizeDndProvider>
                <ProductPropertyEditModal
                    ref={this.productPropertyEditModal}
                    productNature={productNature}
                    callback={this.getTableInfo}
                />
            </div>
        )
    }
}

export default ProductPropertyListPage